<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="title" :border-bottom="false"></fa-navbar>
		<view class="u-p-30 bg-white">
			<u-form :model="form" ref="uForm" label-width="180">				
				
				<u-form-item label="日期" prop="odtime" required  >				   
					<!-- <uni-datetime-picker type="date" :clear-icon="false" :border="false" v-model="form.odtime" @maskClick="maskClick" /> -->
			  	   
					<picker mode="date" :value="form.odtime"  @change="selodtime">
			  	     <view class="uni-input">{{form.odtime}}</view>
			  	    </picker>	
				</u-form-item>
				 
				<u-form-item label="姓名" prop="name" required>
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" required>
					<u-input v-model="form.mobile"  />
				</u-form-item>
				<u-form-item label="地址" prop="address" required>
					<u-input v-model="form.address" />
				</u-form-item>
				
				<u-form-item label="电池伏数" prop="batteryCapacity" required>
					<u-input disabled @click="showsel=true;" v-model="form.batteryCapacity" />			 
				</u-form-item>	
			 
				
				<u-form-item label="电池日期" prop="batteryCapacitytime"   >
					<!-- v1					 -->
					<!-- <uni-datetime-picker type="date" :clear-icon="false" :border="false" v-model="form.batteryCapacitytime" @maskClick="maskClick" /> -->
					 
				    <!-- :start="startDate" :end="endDate" -->
				    <picker mode="date" :value="form.batteryCapacitytime"  @change="selbatteryCapacitytime">
				 	    <view class="uni-input">{{form.batteryCapacitytime}}</view>
				 	 </picker>									
				</u-form-item>		
				<u-form-item label="购买品牌" prop="form.brandname" required>
						 	<u-input type="select" :select-open="cityShow" v-model="form.brandname" placeholder="请选择" @click="cityShow = true"></u-input>
				</u-form-item>
				
			<!-- 	<u-form-item label="产品名称" prop="goodsname">
					<u-input v-model="form.goodsname" />
				</u-form-item> -->
				<u-form-item label="数量" prop="num" required>
					<!-- <u-number-box v-model="form.num"></u-number-box> -->
					 <u-input type="number" v-model="form.num" maxlength=5 />
				</u-form-item>
				<u-form-item label="配件价格" prop="pricepj"> 					  
					<u-input type="number" v-model="form.pricepj" maxlength=5 @blur="dealprice(e)" />
					 
				</u-form-item>
				<u-form-item label="只换空车架"  >
					 <u-input  v-model="form.onlychangekcj"   maxlength=5 @blur="dealprice(e)"/>
				</u-form-item>
				<u-form-item label="新车价格" prop="pricegoods" >
					<u-input type="number" v-model="form.pricegoods" maxlength=5 @blur="dealprice(e)" />
				</u-form-item>
				<u-form-item label="以旧换新" prop="pricechange">
					<u-input type="number" v-model="form.pricechange" maxlength=5  @blur="dealprice(e)"  />
				</u-form-item>
				<u-form-item label="实付总价" prop="pricereal">
					<u-input type="number" v-model="form.pricereal" maxlength=5 disabled=true />
				</u-form-item>
	 
	
				<view class="u-p-30 u-m-t-30 bg-white" >
					<view class="text-weight u-p-b-30">上传图片</view>
					<u-upload
						width="150"
						height="150"
						ref="uUpload"
						@on-uploaded="onUploaded"
						@on-remove="onRemove"
						:action="uploadurl"
						:header="header"
						:form-data="formdata"
						max-count="5"
					 ></u-upload>
				</view>	
	 
				<u-form-item label="备注" prop="mark"> 
					<u-input type="textarea" v-model="form.mark" placeholder="备注"  />
				</u-form-item>	  
<!-- 				<u-form-item label="选择" prop="address">
					<u-input type="textarea" v-model="form.address" />
					<u-button slot="right" type="primary" :custom-style="{ backgroundColor: '#007eff', color: theme.color }" size="mini" @click="chooseAddress">
						选择地址
					</u-button>
				</u-form-item> -->
				<!-- <u-form-item label="设为默认地址" :border-bottom="false">
					<u-switch slot="right" :active-color="theme.bgColor" v-model="isdefault" @change="change"></u-switch>
				</u-form-item> -->
			</u-form>
		</view>
			<!-- <u-calendar v-model="odtimeshow" :mode="range" max-date="2099-12-30" @change="odtimechange"></u-calendar> -->
		<!-- 城市 -->
		<!-- <view class="" v-if="is_render"><fa-citys v-model="cityShow" :areaCode="areaCode" @city-change="cityResult"></fa-citys></view> -->
		<view class="" v-if="is_render"><fa-goodssel v-model="cityShow" :areaCode="areaCode" @city-change="cityResult"></fa-goodssel></view>
		
		<u-select v-model="showsel" mode="single-column" :list="columns" @confirm="confirm"></u-select>
		<view class="u-flex u-col-center u-row-center u-border-top" style="z-index:999">
			<u-button type="primary" :custom-style="{ width: '80vw', backgroundColor: '#007eff', color: theme.color }" shape="circle" hover-class="none" @click="sumbit">
				提交
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			title: '添加地址',
			form: {
				odtime:'请选择',
				receiver: '',
				mobile: '',
				address: '',
				isdefault: 1,
				area_name: '',
				area_id: '',
				 images: '',
				 pricereal:0,
				 batteryCapacity:'',
				 batteryCapacitytime:this.getDate(new Date())
			},
			imageslen:0,
			rules: {				 
				mobile: [
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				odtime:[{
							required: true,
							message: '请输入日期',
							trigger: 'blur'
						}
				], 
				name:[{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						}
				], 
				address:[{
							required: true,
							message: '请输入地址',
							trigger: 'blur'
						}
				],
				brandname:[{
							required: true,
							message: '请输入品牌',
							trigger: 'blur'
						}
				],
				num:[{
							required: true,
							message: '请输入数量',
							trigger: 'blur'
						}
				],
				batteryCapacity:[{
							required: true,
							message: '请选择容量',
							trigger: 'blur'
						}
				],
			},
			isdefault: false,
			cityShow: false,
			is_render: false,
			areaCode: [],
			odtimeshow: 0,
			mode: 'date',// date
			dateString1: this.getDate(new Date()),
			dateString: this.getDateTime(new Date()),
			datetimeString: this.getDateTime(new Date(), false),
			datetimeDefaultValueString: '',
			datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
			dateTimestamp: Date.now(),
			dateInstance: new Date(),
			dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
			datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
			start: Date.now() - 10 * 24 * 3600000,
			end: Date.now() + 10 * 24 * 3600000,
			showsel: false,		 
			columns: [
				  {value:'48V',label:'48V'},{value:'60V',label:'60V'},{value:'72V',label:'72V'}	                    
			]
							
		};
	},
	onLoad(e) {
		this.id = e.id || '';
		console.log(22222,this.id)
		if (e.id) {
			this.title = '编辑';
			this.getAddressInfo();
		} else {
			this.title = '添加';
			this.is_render = true;
			this.isdefault = this.vuex_address.id ? false : true;
		}
		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		userInfo() {
			// this.form.id = this.vuex_user.id;
			this.form.name = this.vuex_user.realname;
		    this.form.mobile = this.vuex_user.mobilehand;
			// this.form.sex = this.vuex_user.sex; 
			// this.form.birthday = this.vuex_user.birthday;
			// this.form.area_name = this.vuex_user.area_name;
			this.form.address =this.vuex_user.address;
			return this.vuex_user;
		},
		header() {
			return {
				token: this.vuex_token || '',
				uid: this.vuex_user.id || 0
			};
		},
		formdata() {
			let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
			let isObj = this.$u.test.object(multipart);
			if (isObj) {
				return this.vuex_config.config.upload.multipart;
			}
			return {};
		},
		uploadurl() {
			if (!this.vuex_config.upload) {
				return '';
			}
			return this.vuex_config.upload.uploadurl;
		}
	},
	
	
	methods: {
		// 时间选择1 
		odtimeshowfun(){
			this.odtimeshow=1;
			 
		},
		odtimechange(e){
			// this.odtimeshow=1;
			this.form.odtime=e.result; 
			console.log(e);
		},
		getgoodsbysel() {
			this.$api.goodsbyselect({ id: this.id }).then(res => {
				if (res.code) {
					this.form = Object.assign(this.form, {
						id: this.id,
						receiver: res.data.receiver,
						mobile: res.data.mobile,
						address: res.data.address
					});
					this.isdefault = res.data.isdefault == 1;
					this.areaCode = [res.data.province_id, res.data.city_id, res.data.area_id];
					this.is_render = true;
				} else {
					this.$u.toast(res.msg);
					uni.$u.route({
						type:'back'
					});
				}
			});
		},
		change(value) {
			this.form.isdefault = value ? 1 : 0;
		},
		chooseAddress() {
			console.log(111)
			uni.chooseLocation({
				success: res => {
					Object.assign(this.form, {
						address: res.address
					});
				}
			});
		},
		//城市选择 三级结果
		cityResult(e) {
			// this.form.area_name = e.province.label + '/' + e.city.label + '/' + e.area.label;
			// this.form.area_id = e.area.value;
			this.form.brandname = e.province.label + '/' + e.city.label ;
			// this.form.area_id = e.area.value;
		},
		sumbit() {
			let onlychangekcj=this.form.onlychangekcj;
			let pricegoods=this.form.pricegoods;
			let pricechange=this.form.pricechange;
			
			if((pricegoods&&onlychangekcj)){
				this.$u.toast("只换空车架与新车价格不可同时填写");
				return false;
			}
			
			
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$api.uformAdd(this.form).then(res => {
						this.$u.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								uni.$u.route({
									type:'back'
								})
							}, 1500);
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		},
		dealprice(e) {
			// 配件价格
		    let pricepj=this.form.pricepj;
			// 只换空车价
			let onlychangekcj=this.form.onlychangekcj;
			// 新车价格
			let pricegoods=this.form.pricegoods;
			// 以旧换新
			let pricechange=this.form.pricechange;
			// console.log(pricegoods,"change",pricechange);			
			// if((pricegoods&&onlychangekcj)){
			// 	this.$u.toast("只换空车架与新车价格不可同时填写");
			// 	return false;
			// }
			
			
			if(pricechange){
				let dealprice1=0;
				let title="以旧换新价格不能大于新车价";
				if(pricepj){
					dealprice1=pricepj;
					this.form.pricereal=pricepj-pricechange;
					title="以旧换新价格不能大于配件价格";
				}else if(onlychangekcj){					
					dealprice1=onlychangekcj;
					this.form.pricereal=dealprice1-pricechange;
				    title="以旧换新价格不能大于只换空车架价格";
				}else if(pricegoods){					
					dealprice1=pricegoods;
					this.form.pricereal=dealprice1-pricechange;
					 title="以旧换新价格不能大于新车价格";
				}
				
				if(dealprice1*1 < pricechange*1){
					this.$u.toast(title);
				}else{
					// this.form.pricereal=pricegoods-pricechange;
				}
				
			}else{
				// this.$u.toast("请输入正确金额");
			}
			
			console.log(e);
		},
		onUploaded(e, name) {
			console.log(e, name);
			console.log("len",e.length);
			if(e.length>5){
				this.$u.toast("最多可以上传5张");
				  // 当文件数量达到限制时，阻止继续添加文件
				      e.stopPropagation();
				return false;
			}
			let images1=""
			images1 = e
				.map(item => {
					return item.response.data.url;
				})
				.join(',');
			this.form.images=images1;
			// let j = JSON.parse(r2.data);
			 this.imageslen = e.length;
		},
		onRemove(index, lists, name) {
			this.images = lists
				.map(item => {
					return item.response.data.url;
				})
				.join(',');
		},
		confirm(e){
			console.log(e[0].value)
			this.form.batteryCapacity=e[0].value; 
			 
		},
			change(e) {
						console.log('----change事件:', e);
		 },
		 
		 
		 selodtime(e) {
		 	   this.form.odtime = e.detail.value
		 			 
		 },
		 selbatteryCapacitytime(e) {
		 	   this.form.batteryCapacitytime = e.detail.value
		 				console.log('----maskClick事件');
		 },
		  
		maskClick(e) {
			 
						
						 this.form.batteryCapacitytime = e.detail.value
						console.log('----maskClick事件');
					},
	    getDateTime(date, addZero = true){
		        return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
	    },
			     getDate(date, addZero = true){
			          date = new Date(date)
			          const year = date.getFullYear()
			          const month = date.getMonth()+1
			          const day = date.getDate()
			          return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			        },
			        getTime(date, addZero = true){
			          date = new Date(date)
			          const hour = date.getHours()
			          const minute = date.getMinutes()
			          const second = date.getSeconds()
			          return this.hideSecond ?
			          `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
			          `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			        },
			  			addZero(num) {
			  				if (num < 10) {
			  					num = `0${num}`
			  				}
			  				return num
			  			}
			  
			  
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>
